<template>
  <div class="main">
    <nav-top Licon="more"
             @callback="callback"></nav-top>
    <div class="main_body">
      <div class="statistics">
        <div :class="key"
             v-for="(lists, key) in statistics"
             :key="key">
          <ul class="Linear clearfix"
              v-for="(list, i) in lists"
              :key="i">
            <li v-for="(item,index) in list"
                :key="index">
              <div class="whiteLine">
                <div class="white">
                  {{
                  item.value=='all_gain'?'￥'+info[item.value]:info[item.value]&&
                  item.value=='vip_sum'?info[item.value]+'人':info[item.value]&&
                  item.value=='stu_sum'?info[item.value]+'人':info[item.value]&&
                  item.value=='pay_stu'?info[item.value]+'人':info[item.value]&&
                  item.value=='order_sum'?info[item.value]+'单':info[item.value]&&
                  item.value=='pay_order'?info[item.value]+'单':info[item.value]&&
                  item.value=='team_sum'?info[item.value]+'人':info[item.value]&&
                  item.value=='tea_sum'?info[item.value]+'人':info[item.value]
                  
                  }}
                </div>
                <div>{{item.label}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="income">
        <div class="income_head">
          <div class="inc_title">最近一周收入</div>
          <div class="clearfix">
            <div class="left"
                 @touchmove.prevent>
              <span @click="popupVis=!popupVis">
                {{selectProxy[0]?selectProxy[0].name:'队员选择'}}
                <img :class="popupVis&&proxy_type=='1'?'':'up'"
                     src="../../../assets/images/icon/class_upArrow.png"
                     alt />
              </span>
              <div v-if="proxy_type=='1'">

                <mt-popup v-model="popupVis"
                          position="bottom"
                          popup-transition="popup-fade">
                  <div class="pick">
                    <mt-picker :slots="teamList"
                               @change="onSexChange"
                               :visible-item-count="5"
                               :show-toolbar="true"
                               valueKey="name"
                               ref="picker">
                      <div class="self clearfix">
                        <div class="picker_title">全部</div>
                        <div @click="submit"
                             class="picker_submit">确定</div>
                      </div>
                    </mt-picker>
                  </div>
                </mt-popup>
              </div>
            </div>
            <!-- <div class="left" v-else>
              <span>
                {{selectProxy[0]?selectProxy[0].name:'队员选择'}}
                <img
                  :class="popupVis?'':'up'"
                  src="../../../assets/images/icon/class_upArrow.png"
                  alt
                />
              </span>
            </div> -->
            <div class="right">
              <span>支付数：{{num}}</span>
              <span>总计：￥{{all}}</span>
            </div>
          </div>
        </div>
        <div class="dateList">
          <div class="poa"></div>
          <div class="li">
            <h4>日期</h4>
            <div v-for="(item,index) in date"
                 :key="index">{{item}}</div>
          </div>
          <div class="li">
            <h4>支付数</h4>
            <div v-for="(item,index) in payNum"
                 :key="index">{{item}}</div>
          </div>
          <div class="li">
            <h4>收入</h4>
            <div v-for="(item,index) in income"
                 :key="index">{{item}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import store from '@/store'

export default {
  name: 'Home',
  computed: {
    ...mapGetters(['proxy_id', 'proxy_type', 'userInfo'])
  },
  data() {
    return {
      info: {},
      statistics: {
        top: {
          list: {
            income: {
              label: '总收入',
              value: 'all_gain'
            },
            vipnum: {
              label: '已开通会员数',
              value: 'vip_sum'
            },
            lave: {
              label: '剩余额度',
              value: 'vip_num'
            }
          }
        },
        center: {
          top: {
            stunum: {
              label: '学生总数',
              value: 'stu_sum'
            },
            paystunum: {
              label: '付费学生数',
              value: 'pay_stu'
            },
            viprate: {
              label: '会员开通率',
              value: 'vip_ratio'
            }
          },
          bottom: {
            ordernum: {
              label: '订单总数',
              value: 'order_sum'
            },
            paynum: {
              label: '付费订单数',
              value: 'pay_order'
            },
            payrate: {
              label: '下单付费率',
              value: 'order_ratio'
            }
          }
        },
        bottom: {
          teamLeader: {
            teamall: {
              label: store.getters.proxy_type * 1 === 1 ? '团队总人数' : '老师数',
              value: store.getters.proxy_type * 1 === 1 ? 'team_sum' : 'tea_sum'
            },
            schnum: {
              label: '学校数',
              value: 'school_sum'
            },
            clanum: {
              label: '班级数',
              value: 'class_sum'
            }
          }
        }
      },
      num: 0, //支付数
      all: 0, //总计
      teamId: '', // 下拉选择的代理商id
      popupVis: false, //控制下拉列表
      teamList: [{ values: [] }], //队员下拉列表
      date: [], //日期
      payNum: [], //支付数
      income: [], //收入
      selectProxy: [] // 队员选择
    }
  },
  created() {
    if (this.proxy_type == '1') {
      this.getProxyList()
    }
    this.incomeCount(this.proxy_id)
    this.getStatic()
  },
  methods: {
    callback(icon) {
      if (icon == 'more') {
        this.showUserPopup()
      }
    },
    onSexChange(picker, values) {
      // console.log(values);
      if (values[0]) {
        this.teamId = values[0].id

        // console.log(this.teamId);
      }
    },
    submit() {
      // 获取选中的值
      this.selectProxy = this.$refs.picker.getValues()
      if (this.teamId) {
        this.date = []
        this.payNum = []
        this.income = []
        this.incomeCount(this.teamId)
      }
      this.popupVis = false
    },
    getStatic() {
      this.Http.getStatic({ proxy_id: this.proxy_id, team_id: this.teamId })
        .then(r => {
          // console.log(r);
          this.info = r
        })
        .catch(e => console.log(e))
    },
    getProxyList() {
      this.Http.getProxyList({
        proxy_id: this.proxy_id,
        proxy_type: this.proxy_type,
        all: 1
      }).then(res => {
        // console.log(res);
        res.map(e => {
          this.teamList[0].values.push(e)
        })
        if (this.teamList[0].values.length == 0) {
          this.teamList[0].values.push('暂无队员')
        }
      })
    },
    incomeCount(proxy_id) {
      var start_time, end_time
      var week = new Date().setDate(new Date().getDate() - 6)
      start_time = Date.parse(new Date(week).toLocaleDateString()) / 1000
      end_time = Date.parse(new Date()) / 1000

      if (start_time && end_time) {
        this.Http.incomeCount({
          proxy_id,
          start_time,
          end_time
        }).then(r => {
          // console.log(r);
          let num = 0,
            all = 0
          r.list.map(e => {
            let date = e.date.slice(5).replace('-', '月') + '日'
            this.date.push(date)
            this.payNum.push(e.pay_num)
            this.income.push(e.income)
            num += e.pay_num
            all += e.income
          })
          this.num = num
          this.all = all.toFixed(2)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  // padding: 1rem;
  box-sizing: border-box;
  width: 100vw;
  // height: 100vh;
  background: rgba(247, 248, 250, 1);
  .main_body {
    padding: 0 1rem 1rem;
  }
  .top,
  .bottom {
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: 0.5rem;
      li {
        // width: 25%;
        // float: left;
        text-align: center;
        color: #fff;
        font-size: 0.8rem;
        min-height: 4.5rem;
        width: 7rem;
        .whiteLine {
          margin: 1.5rem 0;
          // padding: 0.6rem;
          // height: 1rem;
          border-right: 1px solid #fff;
        }
        &:last-child .whiteLine {
          border: none;
        }
        .white {
          margin-top: 0;
          font-weight: 600;
          font-size: 1.2rem;
          margin-bottom: 0.3rem;
          // line-height: 1.2rem;
        }
      }
    }
    .Linear {
      background-image: linear-gradient(
        to left,
        rgba(20, 200, 255, 1),
        rgba(2, 151, 255, 1)
      );
    }
  }
  .center {
    margin: 1rem 0;
    background-image: linear-gradient(
      to left,
      rgba(20, 200, 255, 1),
      rgba(2, 151, 255, 1)
    );
    border-radius: 0.5rem;

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        // width: 25%;
        // float: left;
        text-align: center;
        color: #fff;
        font-size: 0.8rem;
        height: 4.5rem;
        width: 7rem;
        .whiteLine {
          margin-top: 1.2rem;
          padding: 0.6rem;
          height: 1rem;
          border-right: 1px solid #fff;
        }
        &:last-child .whiteLine {
          border: none;
        }
        .white {
          margin-top: -1rem;
          font-weight: 600;
          font-size: 1.2rem;
          margin-bottom: 0.3rem;
        }
      }
    }
    // .Linear {

    // }
  }
  .income {
    border-radius: 1rem;
    // width: 100vw;
    margin-top: 1.5rem;
    background: #fff;
    // height: ;
    .income_head {
      padding: 1rem;
      .inc_title {
        color: rgba(34, 34, 34, 1);
        height: 32px;
        font-size: 34px;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 36px;
        margin-bottom: 23px;
      }
      .left {
        float: left;
        // width: 5rem;
        width: 162px;
        height: 48px;
        color: rgba(103, 106, 107, 1);
        text-align: center;
        font-size: 26px;
        line-height: 48px;
        background-color: rgba(246, 247, 249, 1);
        border-radius: 24px;
        img {
          width: 20px;
          height: 12px;
          vertical-align: middle;
          margin-top: -2px;
        }
        .up {
          transform: rotate(-90deg);
          transition: 0.3s;
        }
        .mint-popup {
          width: 100%;
        }
        .self {
          border-bottom: 1px solid rgba(246, 247, 249, 1);
          padding: 31px 36px 15px;
        }
        .picker_title,
        .picker_submit {
          font-size: 1rem;
        }
        .picker_title {
          float: left;
          margin-left: 50%;
          transform: translateX(-50%);
        }
        .picker_submit {
          float: right;
          // height: 50px;
          color: rgba(20, 200, 255, 1);
          height: 29px;
          font-weight: 400;
          line-height: 33px;
        }
        /deep/.picker-items {
          width: 100vw;
        }
      }
      /deep/.picker-center-highlight {
        width: 40%;
        left: 50%;
        transform: translateX(-50%);
      }

      .right {
        float: right;
        height: 21px;
        font-size: 22px;
        font-weight: 400;
        color: rgba(103, 106, 107, 1);
        line-height: 36px;
        span {
          margin-left: 40px;
          color: rgba(103, 106, 107, 1);
        }
      }
    }
    .dateList {
      display: flex;
      justify-content: space-around;
      text-align: center;
      .poa {
        width: 100%;
        height: 60px;
        background: rgba(246, 247, 249, 1);
      }
      h4 {
        position: relative;
        line-height: 60px;
        height: 60px;
        background: rgba(246, 247, 249, 1);
      }
      .li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: rgba(34, 34, 34, 1);
        font-size: 1rem;
        font-weight: 600;
        div {
          height: 27px;
          font-size: 30px;
          font-weight: 600;
          margin: 5px 0 20px;
          color: rgba(34, 34, 34, 1);
          line-height: 36px;
        }
      }
    }
  }
}
</style>